<template>
  <div class="content">
    <div class="form">
      <div class="item">
        <span class="item-title">用户名:</span>
        <input type="text" v-model="username" class="item-input" placeholder="请输入用户名">
      </div>
      <div class="item">
        <span class="item-title">密码:</span>
        <input type="password" placeholder="密码不少于6位" v-model="password" class="item-input">
      </div>
      <div class="item">
        <div class="item-title">确认密码:</div>
        <input type="password" v-model="confirmPassword" class="item-input" placeholder="请输入确认密码">
      </div>
      <div class="item">
        <span class="item-title">邮箱:</span>
        <input type="email" placeholder="请输入工作邮箱" v-model="email" class="item-input">
      </div>
      <div class="item">
        <span class="item-title">验证码:</span>
        <input type="text" placeholder="请输入验证码" v-model="captcha" class="item-input yan">
        <div id="verificationCode" class="verificationCode" @click="refreshCheck">
            <canvas id="verifyCanvas" ref="verifyCanvas"></canvas>
            <img  alt="验证码图片" id="code_img" ref = 'code_img'>
            <!--<span class="random">{{str}}</span>-->
        </div>
      </div>
    </div>
    <div class="btndiv" ><p class="btn" @click="register">注册</p></div>
  </div>
</template>

<script>
  // import { Toast } from 'mint-ui'
  // 引入生成验证码插件，并返回验证码
  import drawCode from '../../public/tools/VerificationCode'
  export default {
    data() {
      return {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        captcha: '',
        yan: '',
        str: '',
        aa: 1
      }
    },
    mounted() {
      var canvas = this.$refs.verifyCanvas
      var image = this.$refs.code_img
      // 获取随机
      this.str = drawCode(canvas, image)
      console.log(this.str)
    },
    watch: {
      username(newVal) {
        // console.log(newVal)
      }
    },
    methods: {
      // 点击刷新验证码，失败
      refreshCheck() {
        console.log('刷新验证码')
        // this.drawCode()
      },
      register() {
        var self = this
        var params = {
          username: self.username,
          password: self.password,
          nickname: self.username,
          email: self.email
        }
       /*
       后面这里和登录一样添加验证的代码
       */
        if (!this.username) {
          self.$immui.toast('注册用户名不能为空', {duration: 'short', type: 'div'})
        } else if (!this.password) {
          self.$immui.toast('注册密码不能为空', {duration: 'short', type: 'div'})
        } else if (!this.confirmPassword) {
          self.$immui.toast('确认密码不能为空', {duration: 'short', type: 'div'})
        } else if (this.confirmPassword !== this.password) {
          self.$immui.toast('确认密码与密码不一致，请重新输入', {duration: 'short', type: 'div'})
        } else if (!this.email) {
          self.$immui.toast('邮箱不能为空', {duration: 'short', type: 'div'})
        } else if (this.captcha.toUpperCase() !== this.str) {
          self.$immui.toast('验证码不正确', {duration: 'short', type: 'div'})
        } else if (this.aa === 1) {
          // let obj = {'username': this.username, 'password': this.password, 'email': this.email}
          // this.$store.commit('addToUser', obj)
          // Toast('注册成功，正在返回登录页面')
          // 添加环信注册代码 后期再添加其他的内容属性
          var options = {
            username: this.username,
            password: this.password,
            nickname: this.username,
            appKey: this.$webim.config.appkey,
            success: function (res) {
              console.log('注册成功', res)
              /* res
              entities: [{
                  activated: true,
                  created: 1548315085986,
                  modified: 1548315085986,
                  nickname: 'cwf',
                  username: 'cwf',
                  password: 'cwf',
                  uuid: "0e82b820-1faa-11e9-96ca-3bdb8fb9b271"
              }]
              */
              /* 在这里将注册的信息添加进数据库里面 */
              // console.log(params, '-------------------')
              self.axios.post('/api/register/getRegister', params)
                .then((response) => {
                  // 响应成功回调
                  console.log(response, '写入注册的用户成功')
                })
                .catch(err => {
                  console.log(err, '写入注册的用户失败')
                  self.$immui.toast('写入注册的用户失败', {duration: 'short', type: 'div'})
                  })
              // self.$router.push('/login')
            },
            error: function () {
              console.log('注册失败')
              self.$immui.toast('注册失败', {duration: 'short', type: 'div'})
            },
            apiUrl: this.$webim.config.apiURL
          }
          self.$imconn.registerUser(options)
          self.$immui.toast('注册成功', {duration: 'short', type: 'div'})
          // self.$router.push('/login')
          self.$emit('ziTologin')
        } else {
            self.axios.get('/api/register/getRegister')
            .then((response) => {
                  console.log(response, '获得已经注册的用户')
                  response = response.data
                  let tempuser = response.find(f => f.username === self.username) || []
                  if (!tempuser.length) {
                    let params = {
                      username: self.username,
                      password: self.password,
                      nickname: self.username,
                      email: self.email
                    }
                    // 创建一个账号密码
                    return self.axios.post('/api/register/createRegister', params)
                  }
                })
                .catch(err => {
                  console.log(err, '请求已经注册的用户失败')
                  self.$immui.toast('请求已经注册的用户失败', {duration: 'short', type: 'div'})
                  })
        }
        // 点击按钮之后清空里面的值
        self.username = ''
        self.password = ''
        self.confirmPassword = ''
        self.email = ''
        self.captcha = ''
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content{
    width: 100%;
    height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .form{
      flex: 0 0 75%;
      min-height: 75%;
      width: 100%;
      display: flex;
      flex-direction: column;
      .item{
        flex: 1;
        display: flex;
        width: 100%;
        height: 50px;
        text-align: left;
        margin-top: 5px;
        .item-title{
          flex: 0 0 80px;
          width: 80px;
          line-height: 50px;
        }
        .item-input{
          flex: 1;
          padding-left:10px;
          outline: none;
          border-style: none;
          background-color: rgb(250, 255, 189);
          &.yan{
            width: 100px ;
          }
          &:focus{
            border: 1px solid #ccc;
            background: whitesmoke;
          }
        }
        .verificationCode{
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background: #fff;
          #verifyCanvas{
            width: 100px;
            height: 40px;
            display: none;
          }
        }
        .random {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background: #fff;

        }
        img{
          width: 100px;
          height: 100%;
        }
      }
    }
    .btndiv{
      flex: 0 0 25%;
      width: 100%;
      margin: 0 auto;
      position: relative;
      .btn{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        background: #fe7300;
        height: 50%;
        font-size: 25px;
        line-height: 200%;
        text-align: center;
        color: rgba(255,255,255,0.8);
      }
    }
  }
  input::-webkit-input-placeholder {
    font-size: 14px;
  }
</style>
